<template>
    <div class="index">
        <div class="header">
            <el-row>
                <el-col :span="4" class="box guide">
                    <div class="tc" @click="goRouter('guide')">
                        <img src="@/assets/images/guide.png" alt="向导">
                        <p>新手向导</p>
                    </div>
                </el-col>
                <el-col :span="5" class="box assets">
                    <div class="number">
                        <p>108</p>
                    </div>
                    <div class="title">
                        <p class="tc" @click="goRouter('checkAsset')">
                            <i class="icon"></i>
                            <span>固定资产</span>
                        </p>
                    </div>
                    <div class="add" @click="goRouter('addAsset')"></div>
                </el-col>
                <el-col :span="5" class="box label">
                    <div class="number">
                        <p>72</p>
                    </div>
                    <div class="title">
                        <p class="tc" @click="goRouter('checkLabel')">
                            <i class="icon"></i>
                            <span>电子标签</span>
                        </p>
                    </div>
                    <div class="add" @click="goRouter('addLabel')"></div>
                </el-col>
                <el-col :span="5" class="box area">
                    <div class="number">
                        <p>49</p>
                    </div>
                    <div class="title">
                        <p class="tc" @click="goRouter('checkArea')">
                            <i class="icon"></i>
                            <span>区域</span>
                        </p>
                    </div>
                    <div class="add" @click="goRouter('addArea')"></div>
                </el-col>
                <el-col :span="5" class="box reader">
                    <div class="number">
                        <p>18</p>
                    </div>
                    <div class="title">
                        <p class="tc" @click="goRouter('checkReader')">
                            <i class="icon"></i>
                            <span>阅读器</span>
                        </p>
                    </div>
                    <div class="add" @click="goRouter('addReader')"></div>
                </el-col>
            </el-row>
        </div>
        <div class="separate"></div>
        <div class="body">
            <el-row>
                <el-col :span="12">
                    <div class="left">
                        <div class="content fl">
                            <p class="title">
                                <span>固定资产增长趋势</span>
                                <el-dropdown @command="handleCommand" class="fr ">
                                    <span class="el-dropdown-link">
                                        {{ chartChoose }}
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item command="近三月">近三月</el-dropdown-item>
                                        <el-dropdown-item command="近一月">近一月</el-dropdown-item>
                                        <el-dropdown-item command="近半月">近半月</el-dropdown-item>
                                        <el-dropdown-item command="近一周">近一周</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </p>
                            <div class="chart">
                                <chart ref="chart" :options="polar"></chart>
                            </div>
                            <div class="msg">
                                <el-row>
                                    <el-col :span="6" class="time">
                                        <div class="content">
                                            <ul class="circle fr">
                                                <li>
                                                    <span>2017-12-12</span>
                                                    <i></i>
                                                </li>
                                                <li>
                                                    <span>2017-12-12</span>
                                                    <i></i>
                                                </li>
                                                <li>
                                                    <span>2017-12-12</span>
                                                    <i></i>
                                                </li>
                                            </ul>
                                        </div>
                                    </el-col>
                                    <el-col :span="18" class="text">
                                        <div class="content">
                                            <ul class="text-item cf">
                                                <li>添加固定资产苹果电脑34124234</li>
                                                <li>删除固定资产苹果电脑34124234</li>
                                                <li>批量导出固定资产20台</li>
                                            </ul>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="separate fr"></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="right">
                        <div class="title">
                            <span>最新消息</span>
                            <ul class="msg-btns fr">
                                <li class="notice" :class="{active: infoSign.noticeSign}" @click="noticeSort"></li>
                                <li class="modify" :class="{active: infoSign.modifySign}" @click="modifySort"></li>
                                <li class="electricity" :class="{active: infoSign.eleSign}" @click="eleSort"></li>
                                <li class="date" :class="{active: infoSign.dateSign}" @click="dateSort">日期</li>
                                <li class="no-read" :class="{active: infoSign.readSign}" @click="readSort">未读</li>
                            </ul>
                        </div>
                        <div class="msg-item">
                            <ul>
                                <li v-for="msg in alarmMsg">
                                    <el-row>
                                        <el-col :span="6" class="time tr">
                                            <span>{{ msg.timeYear }}</span>
                                            <i class="icon"
                                               :class="{ modify : msg.sign === 'modify', ele : msg.sign === 'ele'}"></i>
                                        </el-col>
                                        <el-col :span="18" class="text">
                                            <span class="text-content" :title="msg.msg">{{ msg.msg }}</span>
                                            <span class="not-read-sign">未读</span>
                                        </el-col>
                                    </el-row>
                                </li>
                                <li>
                                    <el-row>
                                        <el-col :span="6" class="time tr">
                                            <span>2017-12-12</span>
                                            <i class="icon"></i>
                                        </el-col>
                                        <el-col :span="18" class="text">
                                            <span
                                                class="text-content">固定资产方天画戟被移动了水电费阿斯蒂芬水电费阿斯蒂芬爱妃阿斯蒂芬阿斯蒂芬大是大非爱妃按时。</span>
                                            <span class="not-read-sign">未读</span>
                                        </el-col>
                                    </el-row>
                                </li>
                                <li>
                                    <el-row>
                                        <el-col :span="6" class="time tr">
                                            <span>2017-12-12</span>
                                            <i class="icon modify"></i>
                                        </el-col>
                                        <el-col :span="18" class="text">
                                            <span class="text-content">11台固定资产椅子的绑定电子标签。请尽快将电子标签贴到对应的固定资产上。</span>
                                            <span class="not-read-sign read-sign">已读</span>
                                        </el-col>
                                    </el-row>
                                </li>
                                <li>
                                    <el-row>
                                        <el-col :span="6" class="time tr">
                                            <span>2017-12-12</span>
                                            <i class="icon ele"></i>
                                        </el-col>
                                        <el-col :span="18" class="text">
                                            <span class="text-content">阅读器123412电量为5%，请尽快更换电池。</span>
                                            <span class="not-read-sign read-sign">已读</span>
                                        </el-col>
                                    </el-row>
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/tooltip'

    export default {
        name: "index",
        data() {
            return {
                // 图表
                polar: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#FFB3AC'
                            }
                        }
                    },
                    grid: {
                        width: 'auto',
                        height: 'auto',
                        top: '8%',
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['10/29', '11/15', '11/30', '12/15', '12/31', '1/15', '1/29']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '固定资产数',
                            type: 'line',
                            label: { // 数值
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#FF867D' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: 'white' // 100% 处的颜色
                                        }],
                                    }
                                }
                            },
                            smooth: true,
                            smoothMonotone: 'x',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                },
                chartChoose: '近三月',
                infoSign: {
                    noticeSign: true,
                    modifySign: false,
                    eleSign: false,
                    dateSign: false,
                    readSign: false,
                },
                alarmMsg: []
            }
        },
        methods: {
            goRouter(sign) {
                switch (sign) {
                    case 'checkAsset':
                        this.$router.push({path: '/layout/checkAssets'})
                        break
                    case 'addAsset':
                        this.$router.push({path: '/layout/addAssets'})
                        break
                    case 'checkLabel':
                        this.$router.push({path: '/layout/checkLabel'})
                        break
                    case 'addLabel':
                        this.$router.push({path: '/layout/addLabel'})
                        break
                    case 'checkArea':
                        this.$router.push({path: '/layout/checkArea'})
                        break
                    case 'addArea':
                        this.$router.push({path: '/layout/placeArea'})
                        break
                    case 'checkReader':
                        this.$router.push({path: '/layout/checkReader'})
                        break
                    case 'addReader':
                        this.$router.push({path: '/layout/placeReader'})
                        break
                    case 'guide':
                        this.$router.push({path: '/guide'})
                        break
                    default:
                        return
                }
            },
            /**
             * 下拉菜单切换函数
             * @param res
             */
            handleCommand(res) {
                this.chartChoose = res
            },
            /**
             * 消息排序函数，
             * 点击请求后台
             */
            sortClick(sign) {
                for (let i in this.infoSign) {
                    this.infoSign[i] = false
                }
                switch (sign) {
                    case 'notice':
                        this.infoSign.noticeSign = true
                        break
                    case 'modify':
                        this.infoSign.modifySign = true
                        break
                    case 'ele':
                        this.infoSign.eleSign = true
                        break
                    case 'date':
                        this.infoSign.dateSign = true
                        break
                    case 'read':
                        this.infoSign.readSign = true
                        break
                    default:
                        break
                }
            },
            noticeSort() {
                this.sortClick('notice')
            },
            modifySort() {
                this.sortClick('modify')
            },
            eleSort() {
                this.sortClick('ele')
            },
            dateSort() {
                this.sortClick('date')
            },
            readSort() {
                this.sortClick('read')
            },
            getSocket(way) {
                let userId = 1
                if (localStorage.getItem("user")) {
                    userId = JSON.parse(localStorage.getItem("user")).userId
                }
                // 建立连接对象（还未发起连接）
                let sock = new SockJS("http://218.17.162.120:9096/rfid/websocket")
                // 获取 STOMP 子协议的客户端对象
                let stomp = Stomp.over(sock)
                // 向服务器发起websocket连接并发送CONNECT帧
                stomp.connect(
                    {},
                    (frame) => {
                        // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
                        stomp.subscribe(`/user/${userId}/${way}`,
                            (rsp) => {
                                // 订阅后 的 回调
                                let msgObj = {}
                                let json = JSON.parse(rsp.body)
                                msgObj.timeYear = json.time.slice(0, 10)
                                if (way === 'lost') {
                                    msgObj.msg = `固定资产${json.assetsName}在${json.time}时丢失了`
                                    msgObj.sign = 'warn'
                                } else if (way === 'move') {
                                    msgObj.msg = `固定资产${json.assetsName}在${json.time}时，从${json.artificialAreaName}移动到了${json.currentAreaName}`
                                    msgObj.sign = 'warn'
                                }
                                this.alarmMsg.unshift(msgObj)
                                if (this.alarmMsg.length > 9) {
                                    this.alarmMsg.splice(9)
                                }
                            })
                    },
                    (error) => {
                        // 连接失败时（服务器响应 ERROR 帧）的回调方法
                        this.$message.error(error)
                    })
            }
        },
        mounted() {
            this.getSocket('lost')
            this.getSocket('move')
        }
    }
</script>

<style lang="scss" type="text/scss" scoped>
    @import "../../assets/css/color";

    .index {
        height: 100%;
        .header {
            height: 35.5%;
            .el-row {
                height: 100%;
                .el-col {
                    height: 100%;
                    &.box {
                        padding: 0.2rem;
                        position: relative;
                        .number {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 60%;
                            p {
                                font-weight: bold;
                                color: $white;
                                font-size: 0.5rem;
                            }
                        }
                        .title {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 40%;
                            border-top: none;
                            p {
                                font-size: 0.2rem;
                                height: 0.4rem;
                                width: 60%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                cursor: pointer;
                                .icon {
                                    padding-left: 40px;
                                    padding-top: 36px;
                                    margin-right: 0.1rem;
                                    background: url("../../assets/images/spirit.png") no-repeat -149px 0;
                                }
                            }
                        }
                        .add {
                            position: absolute;
                            right: 0.24rem;
                            top: 50%;
                            width: 61px;
                            height: 66px;
                            cursor: pointer;
                            background: url("../../assets/images/spirit.png") no-repeat -5px -55px;
                        }
                        &.guide {
                            div {
                                height: 100%;
                                cursor: pointer;
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                                background: linear-gradient(to top, $guide_gradient_b, $guide_gradient_e);
                                img {
                                    margin: 0.6rem 0 0.3rem 0;
                                    width: 1rem;
                                }
                                p {
                                    color: $white;
                                    font-size: 0.2rem;
                                }
                            }
                        }
                        &.assets {
                            .number {
                                background: linear-gradient(to top, $assets_gradient_b, $assets_gradient_e);
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                            }
                            .title {
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                                border: 1px solid #FCEEEC;
                            }
                        }
                        &.label {
                            .number {
                                background: linear-gradient(to top, $label_gradient_b, $label_gradient_e);
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                            }
                            .title {
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                                border: 1px solid $label_gradient_b;
                                .icon {
                                    background-position: -348px 0;
                                }
                            }
                            .add {
                                background-position: -108px -55px;
                            }
                        }
                        &.area {
                            .number {
                                background: linear-gradient(to top, $area_gradient_b, $area_gradient_e);
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                            }
                            .title {
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                                border: 1px solid #FCEEEC;
                                .icon {
                                    background-position: -250px 0;
                                }
                            }
                            .add {
                                background-position: -208px -55px;
                            }
                        }
                        &.reader {
                            .number {
                                background: linear-gradient(to top, $guide_gradient_b, $guide_gradient_e);
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                            }
                            .title {
                                box-shadow: 6px 6px 10px 0 #FCEEEC;
                                border: 1px solid #FCEEEC;
                                .icon {
                                    background-position: -452px 0;
                                }
                            }
                            .add {
                                background-position: -308px -55px;
                            }
                        }
                    }
                }
            }
        }
        .separate {
            height: 1.5%;
            background: #EFE4E2;
        }
        .body {
            height: 63%;
            .el-row {
                height: 100%;
                .el-col {
                    height: 100%;
                    .left {
                        height: 100%;
                        .content {
                            width: 98.5%;
                            height: 100%;
                            padding: 0.3rem 0.2rem;
                            box-sizing: border-box;
                            .title {
                                font-size: 0.2rem;
                                .el-dropdown {
                                    font-size: 0.2rem;
                                }
                            }
                            .chart {
                                height: 70%;
                                .echarts {
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            .msg {
                                height: 30%;
                                .time {
                                    padding: 0.2rem 0.1rem;
                                    .content {
                                        border-right: 1px solid $segment;
                                        padding: 0;
                                        position: relative;
                                        .circle {
                                            li {
                                                position: absolute;
                                                right: -12px;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
                                                color: $ph_color;
                                                i {
                                                    width: 22px;
                                                    height: 22px;
                                                    background: $white url("../../assets/images/spirit.png") no-repeat -301px -449px;
                                                    margin-left: 0.3rem;
                                                }
                                                &:nth-child(2) {
                                                    top: 50%;
                                                    margin-top: -11px;
                                                }
                                                &:last-child {
                                                    bottom: 0;
                                                    margin: 0;
                                                }
                                            }
                                        }
                                    }
                                }
                                .text {
                                    padding: 0.2rem 0.1rem;
                                    .content {
                                        position: relative;
                                        padding: 0;
                                        .text-item {
                                            li {
                                                position: absolute;
                                                height: 22px;
                                                line-height: 22px;
                                                &:nth-child(2) {
                                                    top: 50%;
                                                    margin-top: -11px;
                                                }
                                                &:last-child {
                                                    bottom: 0;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .separate {
                            height: 100%;
                            width: 1.5%;
                        }
                    }
                    .right {
                        height: 100%;
                        padding: 0.3rem 0.2rem;
                        box-sizing: border-box;
                        .title {
                            font-size: 0.2rem;
                            .msg-btns {
                                li {
                                    float: left;
                                    margin-left: 0.1rem;
                                    min-width: 30px;
                                    height: 33px;
                                    line-height: 33px;
                                    background: url("../../assets/images/spirit.png") no-repeat -50px -148px;
                                    cursor: pointer;
                                    &.notice {
                                        &.active {
                                            background-position: 2px -148px;
                                        }
                                    }
                                    &.modify {
                                        background-position: -147px -146px;
                                        &.active {
                                            background-position: -97px -146px;
                                        }
                                    }
                                    &.electricity {
                                        background-position: -249px -141px;
                                        &.active {
                                            background-position: -198px -141px;
                                        }
                                    }
                                    &.date {
                                        background: none;
                                        &.active {
                                            color: $strong_red;
                                        }
                                    }
                                    &.no-read {
                                        background: none;
                                        &.active {
                                            color: $strong_red;
                                        }
                                    }
                                }
                            }
                        }
                        .msg-item {
                            padding-top: 0.3rem;
                            font-size: 16px;
                            height: 90%;
                            overflow: hidden;
                            width: 100%;
                            li {
                                height: 0.46rem;
                                .time {
                                    line-height: 0.46rem;
                                    border-right: 1px solid $ph_color;
                                    padding-right: 0.3rem;
                                    position: relative;
                                    .icon {
                                        position: absolute;
                                        right: -16px;
                                        top: 39%;
                                        margin-top: -18px;
                                        width: 30px;
                                        height: 37px;
                                        background: $white url("../../assets/images/spirit.png") no-repeat 2px -143px;
                                        &.modify {
                                            background-position: -97px -141px;
                                        }
                                        &.ele {
                                            background-position: -198px -135px;
                                        }
                                    }
                                }
                                .text {
                                    line-height: 0.46rem;
                                    padding-left: 0.3rem;
                                    .text-content {
                                        display: inline-block;
                                        vertical-align: middle;
                                        max-width: 80%; /*要显示文字的宽度*/
                                        overflow: hidden; /*超出的部分隐藏起来。*/
                                        white-space: nowrap; /*不显示的地方用省略号...代替*/
                                        text-overflow: ellipsis;
                                        margin-right: 0.2rem;
                                    }
                                    .not-read-sign {
                                        background: $strong_red;
                                        color: $white;
                                        padding: 0.08rem 0.16rem;
                                        border-radius: 0.04rem;
                                        &.read-sign {
                                            background: $ph_color;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
